<script setup>

import {changeDateFormat} from "@/utils/time.js";
import {
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";

defineOptions({name: 'Table'});
const emit = defineEmits(['rowSelect', 'update', 'delete', 'view']);
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  scroll: {
    type: Object,
    default: {
      x: 500,
      y: 600,
    },
  },
  columns: {
    type: Array,
    default: [],
  },
  dataList: {
    type: Array,
    default: [],
  },
  enumList: {
    type: Array,
    default: [],
  },
  delete: {
    type: Function,
    default: () => ({}),
  },
});
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  selectedKeys: [],
  onChange: (selectedRowKeys) => {
    emit("rowSelect", selectedRowKeys);
  },
});
const scroll = ref({
  x: 500,
  y: 600,
});
const scrollbar = ref(true);
const pageData = ref({});
const method = reactive({
  update: (record) => {
    emit("update", record);
  },
  delete: (record) => {
    props.delete(record.id).then((res) => {
      if (res.code === 200) {
        message.success(res.message);
        emit("delete");
      } else {
        message.error(res.message);
      }
    });
  },
  view: (record) => {
    emit("view", record);
  },
});
watch(props, (val) => {
  val.columns.forEach((item) => {
    if (item.dataIndex === "operate") {
      item.fixed = "right";
    }
  });
});
</script>

<template>
  <a-table
      :loading="props.loading"
      :scroll="props.scroll"
      :scrollbar="scrollbar"
      :row-selection="rowSelection"
      :columns="
       props.columns.filter((col, num) => {
          if (col.show) {
            return col;
          }
       })
       "
      :data-source="props.dataList"
      :pagination="false"
      stripe
      bordered
      column-resizable
  >
    <template #bodyCell="{ column, record, text }">
      <!-- 枚举字段 -->
      <template v-for="(item, index) in props.enumList" :key="index">
        <slot
            v-if="item === column.dataIndex"
            :name="column.dataIndex"
            :text="text"
        ></slot>
      </template>
      <!-- 状态 -->
      <template v-if="column.dataIndex === 'status'">
        <a-switch v-model:checked="record.status" checked-children="正常" un-checked-children="禁用"/>
      </template>
      <!-- 时间 -->
      <template v-if="column.dataIndex.includes('time') && column.dataIndex !== 'request_time'">
        {{ changeDateFormat(text) }}
      </template>
      <!-- 操作 -->
      <template v-if="column.dataIndex === 'operate' && record.type !== 3">
        <a-tooltip title="编辑" placement="top">
          <a-button class="btn" type="primary" @click="method.update(record)">
            <template #icon>
              <EditOutlined/>
            </template>
          </a-button>
        </a-tooltip>
        <!-- 按钮插槽 -->
        <slot name="button" :text="record"></slot>
        <a-tooltip title="删除" placement="top">
          <a-popconfirm
              title="是否确定删除该条信息"
              type="warning"
              ok-text="确认"
              cancel-text="取消"
              @confirm="method.delete(record)">
            <a-button class="btn" type="primary" danger>
              <template #icon>
                <DeleteOutlined/>
              </template>
            </a-button>
          </a-popconfirm>
        </a-tooltip>
        <a-tooltip title="查看" placement="top">
          <a-button style="background-color: #36b368" type="primary" @click="method.view(record)">
            <template #icon>
              <EyeOutlined/>
            </template>
          </a-button>
        </a-tooltip>
      </template>
    </template>
  </a-table>
</template>

<style scoped lang="less">
.btn {
  margin-right: 10px;
}
</style>